<template>
  <rx-layout>
    <div slot="center">

      <rx-fit>

          <div class="table-operator">
              <a-button  type="primary" icon="plus" @click="add">{{$ti18('rxList.newBtn','新建')}}</a-button>
              <a-dropdown v-if="selectedRowKeys.length > 0">
                  <a-button type="danger" icon="delete" @click="delByIds(selectedRowKeys)">{{$ti18('rxList.delBtn','删除')}}</a-button>
              </a-dropdown>
          </div>

        <rx-grid
          ref="table"
          bordered
          :allowRowSelect="true"
          :multiSelect="true"
          :columns="columns"
          :defaultPageSize="10"
          url="/api-bpm/bpm/core/bpmAgent/getMyAgent"
          data-field="result.data"
          :pageSizeOptions="['10','30','40']"
          id-field="id"
          @selectChange="onSelectChange"
          :scroll="{x:1300}"
        >
          <span slot="appId" slot-scope="{ text, record }">
            {{allApps[text]?$i18(allApps[text].appName,'应用名称'):$ti18('rxList.noAppName','无')}}
          </span>
          <span slot="action" slot-scope="{text,record}" class="actionIcons"  >
            <span   @click.stop="edit(record)">{{$ti18('rxList.editBtn','编辑')}}</span>
            <span   @click="delByIds([record.id])">{{$ti18('rxList.delBtn','删除')}}</span>

          </span>
        </rx-grid>
      </rx-fit>
    </div>
  </rx-layout>
</template>

<script>


  import BpmAgentEdit from "./BpmAgentEdit";
  import {RxLayout, Util, RxFit, RxGrid, AppBaseList} from '@lowcode/jpaas-common-lib'

  import BpmAgentApi from '@/api/bpm/core/bpmAgent'
  import { mapState} from 'vuex';

  export default {
    name: "BpmAgentList",
    mixins: [AppBaseList],
    components: {

      RxLayout,
      RxFit,
      RxGrid,
    },
      computed: {
          ...mapState({
              // 所属应用
              allApps: state => state.appSetting ? state.appSetting.allApps : {}
          }),
      },
    data() {
      return {
        // 表头
        columns: [
          {
            title: this.$ti18('rxList.index','序号'),
            type: 'indexColumn',
            dataIndex: 'serial',
            scopedSlots: {customRender: 'serial'},
            width: 60
          },
          {
            title: this.i18n('form.name','代理简称'),
            dataIndex: 'name',
            width: 120
          },
          {
            title: this.i18n('form.agent','代理人'),
            dataIndex: 'toUserName',
            width: 120
          }, {
            title: this.i18n('form.startTime','开始时间'),
            dataIndex: 'startTime',
            width: 120
          },
          {
            title: this.i18n('form.endTime','结束时间'),
            dataIndex: 'endTime',
            width: 120
          },
            {
                title: this.$ti18('rxForm.createTime','创建时间'),
                dataIndex: 'createTime',
                width: 160,
            },
          {
            title: this.$ti18('rxList.action','操作'),
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'},
            width: 80
          }
        ],
        component:BpmAgentEdit,
        comment:this.i18n('list.comment','代理配置'),
          widthHeight:["800px","600px"]
      }
    },
    methods: {
      i18n(name,text,key){
          return this.$ti18(name,text,"BpmAgent",key);
      },
      delById(ids) {
            return BpmAgentApi.del({ ids: ids.join(',') })
      }
    }
  }
</script>

<style scoped>
    .rx-gridBox{
        height: calc(100% - 46px);
    }
</style>
